.contact-list-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 110px);

  .contact-header {
    margin-bottom: 20px;

    :deep(.el-card__header) {
      padding: 15px 20px;
      border-bottom: 1px solid #ebeef5;
    }

    .basic-search-form {
      .el-form-item {
        margin-bottom: 15px;
      }
    }

    .search-buttons {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .left-buttons,
      .right-buttons {
        display: flex;
        gap: 10px;
      }
    }
  }

  .contact-content {
    .table-toolbar {
      margin-bottom: 15px;
      display: flex;
      gap: 10px;
    }

    .custom-table {
      :deep(.el-table__cell) {
        padding: 8px 0;
      }

      :deep(.el-table__header th) {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 500;
      }
    }

    .contact-name-cell {
      display: flex;
      align-items: center;
      gap: 8px;

      .avatar-icon {
        background-color: #409eff;
        color: white;
      }

      .default-tag {
        margin-left: auto;
      }
    }

    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .drawer-content {
    padding: 20px;

    :deep(.el-descriptions__label) {
      width: 120px;
      font-weight: 500;
    }
  }
}
